<template>
  <div id="univer" ref="container" class="univer-container" :style="{height: height + 'px'}" />
</template>

<script>

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/sheets-ui/lib/index.css'
import '@univerjs/sheets-formula/lib/index.css'

import { LocaleType, LogLevel, Univer, Worksheet } from '@univerjs/core'
import { defaultTheme } from '@univerjs/design'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverSheetsPlugin } from '@univerjs/sheets'
import { UniverSheetsFormulaPlugin } from '@univerjs/sheets-formula'
import { UniverSheetsUIPlugin } from '@univerjs/sheets-ui'
import { UniverUIPlugin } from '@univerjs/ui'

export default {
  name: 'UniverSheet',
  props: {
    // workbook data
    data: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // univer instance
      univer: null,
      height: 0,
      // workbook instance
      workbook: null
    }
  },
  watch: {
    // watch data change, and re-create univer instance
    data: {
      handler(val) {
        // this.destroyUniver()
        // this.init(val)
      },
      immediate: true
    }
  },
  mounted() {
    const clientWidth = this.$refs.container.clientWidth
    const row = Object.keys(this.data.sheets['sheet-01'].cellData)
    const rowKey = row[row.length - 1]
    const rowCount = +rowKey + 1
    this.data.sheets['sheet-01'].rowCount = rowCount
    const columnCount = +this.data.sheets['sheet-01'].mergeData[0].endColumn + 1
    this.data.sheets['sheet-01'].columnCount = columnCount
    const worksheet = new Worksheet(this.data.sheets['sheet-01'], this.data.styles)
    let width = 0
    let height = 0
    for (let i = 0; i < columnCount; i++) {
      const columnWidth = worksheet.getColumnWidth(i)
      width = columnWidth + width
    }
    for (let i = 0; i < rowCount; i++) {
      const rowHeight = worksheet.getRowHeight(i)
      height = rowHeight + height
    }
    this.data.sheets['sheet-01'].zoomRatio = clientWidth / (width + 120)
    this.height = (height + 100) * this.data.sheets['sheet-01'].zoomRatio
    this.init(this.data)
    this.$forceUpdate()
  },
  beforeDestroy() {
    this.univer?.dispose()
    this.workbook = null
  },
  methods: {
    /**
     * Initialize univer instance and workbook instance
     * @param data {IWorkbookData} document see https://univer.work/api/core/interfaces/IWorkbookData.html
     */
    init(data = {}) {
      const univer = new Univer({
        theme: defaultTheme,
        locale: LocaleType.ZH_CN,
        logLevel: LogLevel.VERBOSE
        // PermissionPoint:
        // eslint-disable-next-line new-cap
      })
      this.univer = univer
      // core plugins
      univer.registerPlugin(UniverRenderEnginePlugin)
      univer.registerPlugin(UniverFormulaEnginePlugin)
      univer.registerPlugin(UniverUIPlugin, {
        container: this.$refs.container,
        header: this.type === 'univer' ? true : false,
        toolbar: this.type === 'univer' ? true : false,
        footer: this.type === 'univer' ? true : false
      })

      // doc plugins
      univer.registerPlugin(UniverDocsPlugin, {
        hasScroll: false
      })
      univer.registerPlugin(UniverDocsUIPlugin)

      // sheet plugins
      univer.registerPlugin(UniverSheetsPlugin)
      univer.registerPlugin(UniverSheetsUIPlugin)
      univer.registerPlugin(UniverSheetsFormulaPlugin)

      this.workbook = univer.createUniverSheet(data)
    },
    /**
     * Destroy univer instance and workbook instance
     */
    destroyUniver() {
      this.univer?.dispose()
      this.workbook = null
    },
    /**
     * Get workbook data
     */
    getData() {
      if (!this.workbook) {
        throw new Error('Workbook is not initialized')
      }
      return this.workbook.save()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.univer-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Also hide the menubar */
:global(.univer-menubar) {
  display: none;
}
</style>
